<template>
  <form-drawer ref="formDrawerRef" title="上传报告单" :destroyOnClose="true" @submit="handleSubmit">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="出厂时间" prop="leaveTime">
        <el-date-picker
          v-model="form.leaveTime"
          type="date"
          placeholder="请选择出厂时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="handleDisabledDate"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="报告单" prop="report">
        <upload-img :watermark="true" @success="handleUpdateImg"></upload-img>
      </el-form-item>
    </el-form>
  </form-drawer>
</template>
<script setup lang="ts">
import { ref, toRefs } from "vue";
import dayjs from "dayjs";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { uploadSecondReportApi } from "@/api/second";

const emits = defineEmits(["success"]);
const props = defineProps({
  recordId: {
    type: [Number, String],
    default: ""
  }
});
const { recordId } = toRefs(props);
const time = ref(dayjs().format("YYYY-MM-DD HH:mm:ss"));
const { formDrawerRef, formRef, form, rules, handleCreate, handleSubmit } = useInitForm({
  form: {
    recordId,
    report: "",
    leaveTime: time
  },
  rules: {
    leaveTime: [{ required: true, message: "请选择出厂时间", trigger: "change" }],
    report: [{ required: true, message: "请上传报告单", trigger: "blur" }]
  },
  createData: uploadSecondReportApi,
  success: () => {
    emits("success");
  }
});
// 上传图片
const handleUpdateImg = (e: any) => {
  form.report = e[0].url;
};
// 禁止选择今天之后的时间
const handleDisabledDate = (time: any) => {
  return time.getTime() > Date.now();
};

defineExpose({
  handleCreate
});
</script>
<style scoped lang="scss"></style>
